import React from "react";
// useNavigate hooks用于做编程式导航
import {
  Link,
  Routes,
  Route,
  useNavigate,
  useLocation,
} from "react-router-dom";

const Home = () => {
  // useNavigate返回的是一个函数
  const navigate = useNavigate();

  const fn = () => {
    // navigate("/about");
    // 传值的时候可以传对象的形式
    // navigate({
    //   pathname: "/about",
    //   search: "?a=3",
    //   hash: "#mkj",
    // });

    // 相当于vue的router.replace()
    // navigate("/about", { replace: true });

    // 第二个参数里面可以加state，表示一个不可见的路由传参，用location接受
    // navigate("/about", { replace: true, state: { x: 10, y: 20 } });

    // 也可以直接传数字，相当于vue的go方法
    navigate(-1);
  };

  return (
    <div>
      这是home页面 - <button onClick={fn}>跳转到关于页</button>
    </div>
  );
};
const About = () => {
  const location = useLocation();
  console.log(location);
  return <div>这是about页面</div>;
};

const App = () => {
  return (
    <>
      <h2>编程式导航</h2>

      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <Routes>
        <Route path="/home" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
        <Route path="*" element={<div>404 notfound...</div>}></Route>
      </Routes>
    </>
  );
};

export default App;
